<template>
    <v-scale-screen width="1920" height="1080" :fullScreen="true">
        <!-- 头部区域 -->
        <div class="dp_top">
            <!-- 返回、天气 -->
            <div class="dt_back_weather">
                <img class="dbw_fh" src="../../../assets/largescreen/new/top_back.png" alt="" @click="goBack">
                <div class="dbw_tianqi">
                    <img :src="qihouimg">
                    <div class="tianqi">{{tianqi}} {{wendu}}℃</div>
                </div>
            </div>
            <!-- 类型 -->
            <div class="dt_type dt_type_ykhx" @click="toTurn(1)"><div>游客画像</div></div>
            <div class="dt_type dt_type_jq" @click="toTurn(2)"><div>景区</div></div>
            <div class="dt_type dt_type_jdms" @click="toTurn(3)"><div>酒店民宿</div></div>
            <div class="dt_type dt_type_jt" @click="toTurn(4)"><div>交通</div></div>
            <!-- 当前时间 -->
            <div class="dt_time">{{ currentTime }}</div>
            <!-- 中间文字隐藏区域用于点击切换首页 -->
            <div class="dt_click" @click="toTurn(0)"></div>
        </div>
        <!-- 中间区域 -->
        <div class="dp_middle">
            <!-- 中间区域的左边部分 -->
            <div class="dm_left">
                <!-- 景区游客量、民宿入住率 -->
                <div class="dp_box jqykl_msrzl">
                    <div class="item">
                        <div class="info">
                            <p>景区游客量</p>
                            <p>{{ scenePersons }}<span>人次</span></p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="info">
                            <p>民宿入住率</p>
                            <p>{{ hotelRzl }}<span style="margin-top: 1px;">%</span></p>
                        </div>
                    </div>
                </div>
                <!-- 景区游客数量统计 -->
                <div class="box dp_box">
                    <div class="b_title">景区游客数量统计</div>
                    <div class="db_content">
                        <div class="chart mjzyx_pm">
                            <vue-seamless-scroll ref="vueSeamlessRef" class="scroll-list-seamless" :data="copyDataJqyk" :class-option="defaultOption" >
                                <ul class="ul-scoll">
                                    <li v-for="(item,index) in jqykRankList" :key="index" class="mpm_item">
                                        <div class="mpmi_top">
                                            <div class="mpmit_l">
                                                <div class="mpmil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>
                                                <p>{{ item.name }}</p>
                                            </div>    
                                            <div class="mpmit_r">{{ item.num||0 }}人</div>    
                                        </div>
                                        <div class="mpmi_bottom">
                                            <div class="mpmi_bottom_bl" :style="{'width':item.bl+'%'}"></div>
                                        </div>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
                <!-- 船票预订统计 -->
                <div class="box dp_box">
                    <div class="b_title">船票预订统计</div>
                    <div class="shiporder_tabs">
                        <div class="pre" :class="tidx==0?'active':''" @click="changeTabByShipOrder(0,7)">近7天</div>
                        <div class="pre" :class="tidx==1?'active':''" @click="changeTabByShipOrder(1,15)">近15天</div>
                    </div>
                    <div class="db_content">
                        <div class="chart" ref="Visitorage"></div>
                    </div>
                </div>
            </div>
            <!-- 中间区域的中间部分 -->
            <div class="dm_center">
                <div class="dmc_map">
                    <div class="dmcm_nums">
                        <div class="dn_pte">
                            <div class="title">今日在岛人数(人)</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in onlineIslands" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                        <div class="dn_pte">
                            <div class="title">今日进岛人数(人)</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in enterIslands" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                        <div class="dn_pte">
                            <div class="title">今日出岛人数(人)</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in leaveIslands" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 客流统计同比 -->
                <div class="box box_kltjfx">
                    <!-- 标题 -->
                    <div class="b_title">客流统计同比</div>
                    <div class="db_content">
                        <div class="chart" ref="Statisticalanalysis"></div>
                    </div>
                </div>
            </div>
            <!-- 中间区域的右边部分 -->
            <div class="dm_right">
                <div class="box dp_box">
                    <div class="b_title">游客特征分析</div>
                    <div class="db_content">
                        <div class="chart">
                            <div class="Featureanalysis">
                                <div class="Featureanalyimgsis1">
                                    <div class="male1">男性</div>
                                    <div class="male2">{{trait1}}%</div>
                                </div>
                                <div class="Featureanalyimgsis2">
                                    <div class="male1">女性</div>
                                    <div class="male2">{{trait2}}%</div>
                                </div>
                            </div>
                            <div class="malepic">
                                <div class="malepicdiv">
                                    <div class="malepicdiv1" >
                                        <div class="Featureanalysispics" ref="Featureanalysis1"></div>
                                        <div class="bili">
                                        {{ Ratio3}}%
                                        </div>
                                    </div>
                                    <div class="malepicdiv2">
                                        未成年(0-17岁)
                                    </div>
                                </div>
                                <div class="malepicdiv">
                                    <div class="malepicdiv1">
                                        <div class="Featureanalysispics" ref="Featureanalysis2"></div>
                                        <div class="bili">
                                            {{ Ratio4}}%
                                        </div>
                                    </div>
                                    <div class="malepicdiv2">
                                        青年(18-45岁)
                                    </div>
                                </div>
                                <div class="malepicdiv">
                                    <div class="malepicdiv1">
                                        <div class="Featureanalysispics" ref="Featureanalysis3"></div>
                                        <div class="bili">
                                            {{ Ratio5}}%
                                        </div>
                                    </div>
                                    <div class="malepicdiv2">
                                        中年(45-59岁)
                                    </div>
                                </div>
                                <div class="malepicdiv">
                                    <div class="malepicdiv1">
                                        <div class="Featureanalysispics" ref="Featureanalysis4"></div>
                                        <div class="bili">
                                            {{ Ratio6}}%
                                        </div>
                                    </div>
                                    <div class="malepicdiv2">
                                        老年(60-99岁)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box dp_box">
                    <div class="b_title">年度累计客流人数</div>
                    <div class="db_content">
                        <div class="chart">
                            <div class="cb_title">
                                <img src="../../../assets/largescreen/jdms_user.png">
                                <p>年度累计客流<span>{{ jjrYearPersonNum }}</span>人次</p>
                            </div>
                            <div class="cb_chart_jjr">
                                <div ref="jjrrzfxChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box dp_box">
                    <div class="b_title">客流统计分析</div>
                    <div class="kltjfx_tabs">
                        <div class="pre" :class="kidx==0?'active':''" @click="changeTabByKltjfx(0,3)">月</div>
                        <div class="pre" :class="kidx==1?'active':''" @click="changeTabByKltjfx(1,2)">季</div>
                        <div class="pre" :class="kidx==2?'active':''" @click="changeTabByKltjfx(2,1)">年</div>
                    </div>
                    <div class="db_content">
                        <div class="chart" ref="Passengerflow"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间动态背景地图 -->
        <div class="dp_map"></div>
        <!-- 乡镇地图标记点 -->
        <div class="map_town"
            :class="townIndex===index?'town_active':''"
            :style="town.style"
            v-for="(town,index) in townList"
            :key="index"
            @click="changeTown(town.id,index,town.no)"
        >{{ town.name }}</div>
        <!-- 底部区域 -->
        <div class="dp_bottom"></div>
    </v-scale-screen>
</template>
<script>
    var sjTimer,refreshTimer;
    import * as echarts from "echarts";
    import 'echarts-gl';
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        components: {
            vueSeamlessScroll
        },
        data() {
            return {
                // 头部
                qihouimg: '',   
                tianqi: '',
                wendu: '',
                currentTime:'',
                routerCfg:{
                    0:'/cockpit-home',
                    1:'/cockpit-cockpitjd',
                    2:'/cockpit-cockpitjj',
                    3:'/cockpit-cockpityk',
                    4:'/cockpit-cockpitjt'
                },
                // 中间区域
                onlineIslands:[],
                enterIslands:[],
                leaveIslands:[],
                scenePersons:'',
                hotelRzl:'',
                // 景区游客数量统计
		        copyDataJqyk: [],
                jqykRankList:[],
                // 地图岛屿
                myislandId: [],
                portNo:[],
                townIndex:'',
                townList:[
                    {id:['4164678933'],no:['1014'],name:'花鸟乡',style:{'left': '1058px','top': '290px'}},
                    {id:['1721484186251956225','1730426782508650497'],no:['1028'],name:'洋山镇',style:{'left': '614px','top': '495px'}},
                    {id:['5554544444'],no:['1010'],name:'菜园镇',style:{'left': '820px','top': '462px'}},
                    {id:['5554544444'],no:['1019'],name:'五龙乡',style:{'left': '1017px','top': '477px'}},
                    {id:['1346784662'],no:['1017'],name:'枸杞乡',style:{'left': '1180px','top': '501px'}},
                    {id:['4545454544'],no:['1016'],name:'嵊山镇',style:{'left': '1307px','top': '485px'}},
                    {id:['5645645645'],no:['1034'],name:'黄龙乡',style:{'left': '1054px','top': '612px'}}
                ],
                //船票预订统计
                tidx:0,
                Overviewparkselectjt:7,
                day7ShipCount: [4, 3, 2],
                today7: {
                    xaxisData: ['12-05', '12-06', '12-07', '12-08', '12-09', '12-10', '12-11'],
                    yaxisData: [5000, 10000, 20000, 15000, 24000, 24000, 24000,]
                },
                // 客流统计同比
                province:'',
                jinnian1:'',
                jinnian2:'',
                analysislastyear:[],
                analysisThisyear:[],
                analysisyearonyearbasis:[],
                // 游客特征分析
                Ratio6:'',
                Ratio5:'',
                Ratio4:'',
                Ratio3:'',
                trait6:'',
                trait5:'',
                trait4:'',
                trait3:'',
                trait2:'',
                trait1:'',
                totalNum:'',
                // 年度累计客流人数
                jjrYearPersonNum:'',
                // 客流统计分析
                kidx:2,
                Overviewparkselect:1,
                shijian:[],
                renshu:[],
                renshuyear1:[],
                renshuyear2:[],
                renshujidu1:[],
                renshujidu2:[],
                renshuyue1:[],
                renshuyue2:[],
            }
        },
        created(){
            this.getWeather();
            this.getCurrentTime();
            sjTimer = setInterval(() => {
                this.getCurrentTime();
            }, 1000);
            this.init();
            refreshTimer = setInterval(() => {
                this.init();
            }, 15000);
        },
        computed: {
            defaultOption () {
                return {
                    step: 0.3, // 数值越大速度滚动越快
                    limitMoveNum: 1, // 开始无缝滚动的数据量
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },
        beforeDestroy(){
            clearInterval(sjTimer);
            clearInterval(refreshTimer);
        },
        methods:{
            getWeather(){
                let that=this;
                //加载天气查询插件
                AMap.plugin('AMap.Weather', function() {
                    //创建天气查询实例
                    let weather = new AMap.Weather();
                    //执行实时天气信息查询
                    weather.getLive('嵊泗县', function(err, data) {
                        if (data.info == 'OK') {
                            that.tianqi = data.weather;
                            that.wendu = data.temperature;
                            if (data.weather.indexOf("晴") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png';
                            } else if (data.weather.indexOf("暴雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png';
                            } else if (data.weather.indexOf("暴雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png';
                            } else if (data.weather.indexOf("冰雹") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png';
                            } else if (data.weather.indexOf("大雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png';
                            } else if (data.weather.indexOf("大雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png';
                            } else if (data.weather.indexOf("多云") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png';
                            } else if (data.weather.indexOf("雷阵雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png';
                            } else if (data.weather.indexOf("雾") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png';
                            } else if (data.weather.indexOf("小到中雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png';
                            } else if (data.weather.indexOf("小雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png';
                            } else if (data.weather.indexOf("雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png';
                            } else if (data.weather.indexOf("阴") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png';
                            } else if (data.weather.indexOf("雨夹雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png';
                            } else if (data.weather.indexOf("阵雨@") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png';
                            } else if (data.weather.indexOf("中到大雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png';
                            } else if (data.weather.indexOf("中雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png';
                            } else if (data.weather.indexOf("中雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png';
                            }else if (data.weather.indexOf("霾") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png';
                            }

                        }
                    });
                });
            },
            getCurrentTime(){
                this.currentTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
            },
            init(){
                this.getIslandUsers();
                this.getSceneUserSum();
                this.getHotelRzl();
                this.getSceneUserNums();
                this.getShipOrders();
                this.getKlTjTb();
                this.getVisitorTzfx();
                this.getKlUsersByYear();
                this.getKlTjFx();
            },
            goBack(){
                this.$router.replace({ path: '/home' })
            },
            toTurn(type){
                if(this.$route.path==this.routerCfg[type]) return
                this.$router.push({ path: this.routerCfg[type] });
            },
            // 获取在岛、进岛、出岛人数
            getIslandUsers(){
                this.onlineIslands = [];
                this.enterIslands = [];
                this.leaveIslands = [];
                this.$http.get('/sys/screen/ship/inOutIslandCountNew?portNo='+this.portNo).then(res=>{
                    if(res.data.code==0){
                        let zd = (res.data.data.todayShipIngCount||0)+'';
                        let jd = (res.data.data.todayShipInCount||0)+'';
                        let cd = (res.data.data.todayShipOutCount||0)+'';
                        for (let i=0;i<zd.length;i++){this.onlineIslands.push(zd.substr(i,1))};
                        for (let i=0;i<jd.length;i++){this.enterIslands.push(jd.substr(i,1))};
                        for (let i=0;i<cd.length;i++){this.leaveIslands.push(cd.substr(i,1))};
                    }
                })
            },
            // 获取景区游客量
            getSceneUserSum(){
                this.$http.post('/sys/screen/scenic/curScenicTotalCount', {
                    islandId: this.myislandId
                }).then(res=>{
                    if(res.data.code==0){
                        this.scenePersons = res.data.data||0;
                    }
                })
            },
            // 获取民宿入住率
            getHotelRzl(){
                this.$http.post('/sys/hotel/screen/getHotelCheckinRatio', {
                    islandIds: this.myislandId
                }).then(res=>{
                    if(res.data.code==0){
                        this.hotelRzl = res.data.data||0;
                    }
                })
            },
            // 获取景区游客数量统计
            getSceneUserNums(){
                this.jqykRankList = [];
                this.copyDataJqyk = [];
                this.$http.post('/sys/screen/scenic/queryScenicRankingList', {
                    islandId: this.myislandId
                }).then(res => {
                    if(res.data.code==0){
                        let resData = res.data.data;
                        resData.forEach(d=>{
                            d.sumCount = parseInt(d.holidayCount) + parseInt(d.workCount);
                        })

                        let sum = resData.reduce((cur,pre)=>cur+pre.sumCount,0);
                        resData.forEach(d=>{
                            this.jqykRankList.push({
                                name:d.scenicName,
                                num:d.sumCount,
                                bl:(d.sumCount/sum*100).toFixed(2)||0
                            })
                        })
                        this.$nextTick(() => {
                            const scrollListDom = document.querySelector('.scroll-list-seamless')
                            if (scrollListDom) {
                                const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                                let liLength = scrollListDom.querySelectorAll('li').length;
                                let liHeight = scrollListDomLast.clientHeight;
                                let liSumHeight = liHeight*liLength;
                                let parentHeight = document.querySelector('.mjzyx_pm').clientHeight;
                                let autoPlay = liSumHeight>parentHeight;
                                if (autoPlay) {
                                    this.copyDataJqyk = this.jqykRankList;
                                    this.$refs.vueSeamlessRef._startMove();
                                }
                            }
                        })
                    }
                })
            },
            //获取船票预订统计
            changeTabByShipOrder(idx,num){
                if(this.Overviewparkselectjt==num) return
                this.tidx = idx;
                this.Overviewparkselectjt = num;
                this.getShipOrders();
            },
            getShipOrders(){
                this.$http.get('/sys/screen/ship/today7ShipInfo', {
                    params: {
                        portNo: this.portNo,
                        day:this.Overviewparkselectjt,
                    } }).then(res => {
                    if (res.data.code == 0) {
                        const array = []
                        this.day7ShipCount = res.data.data.day7ShipCount
                        this.today7.xaxisData = res.data.data.today7ShipInfoDate
                        res.data.data.today7ShipInfoCount.forEach(item => {
                            array.push(parseInt(item))
                        })
                        this.today7.yaxisData = array
                        this.$set(this.today7, this.today7)
                        this.setVisitoragedata()
                    } else {
                        this.$message(res.data.msg);
                    }
                })
            },
            setVisitoragedata() {
                let myChart = echarts.init(this.$refs.Visitorage);
                let xaxisData = this.today7.xaxisData
                let yaxisData = this.today7.yaxisData
                const offsetX = 10;
                const offsetY = 5;
                // 绘制左侧面
                const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        // 会canvas的应该都能看得懂，shape是从custom传入的
                        const xAxisPoint = shape.xAxisPoint;
                        const c0 = [shape.x, shape.y];
                        const c1 = [shape.x - offsetX, shape.y - offsetY];
                        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                        const c3 = [xAxisPoint[0], xAxisPoint[1]];
                        ctx
                            .moveTo(c0[0], c0[1])
                            .lineTo(c1[0], c1[1])
                            .lineTo(c2[0], c2[1])
                            .lineTo(c3[0], c3[1])
                            .closePath();
                    },
                });

                // 绘制右侧面
                const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint;
                        const c1 = [shape.x, shape.y];
                        const c2 = [xAxisPoint[0], xAxisPoint[1]];
                        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                        const c4 = [shape.x + offsetX, shape.y - offsetY];
                        ctx
                            .moveTo(c1[0], c1[1])
                            .lineTo(c2[0], c2[1])
                            .lineTo(c3[0], c3[1])
                            .lineTo(c4[0], c4[1])
                            .closePath();
                    },
                });

                // 绘制顶面
                const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const c1 = [shape.x, shape.y];
                        const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                        const c3 = [shape.x, shape.y - offsetX];
                        const c4 = [shape.x - offsetX, shape.y - offsetY];
                        ctx
                            .moveTo(c1[0], c1[1])
                            .lineTo(c2[0], c2[1])
                            .lineTo(c3[0], c3[1])
                            .lineTo(c4[0], c4[1])
                            .closePath();
                    },
                });

                // 注册三个面图形
                echarts.graphic.registerShape("CubeLeft", CubeLeft);
                echarts.graphic.registerShape("CubeRight", CubeRight);
                echarts.graphic.registerShape("CubeTop", CubeTop);

                let option = {
                    //  backgroundColor: 'black',
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                        //  backgroundColor: "rgba(255,255,255,0.75)",
                        extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
                        textStyle: {
                            fontSize: 12,
                            color: "#fff",
                        },
                        formatter: (params, ticket, callback) => {
                            const item = params[1];
                            return item.name + " : " + item.value + "人";
                        },
                    },
                    grid: {
                        left: "1%",
                        right: "0%",
                        top: "16%",
                        bottom: "10%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        data: xaxisData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: '#035192'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位：人",
                        nameTextStyle: {
                            color: '#C6D7F1',
                            fontWeight: 400,
                            fontSize: 12
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 1,
                                color: '#545454'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    series: [
                        {
                            type: "custom",
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)]);
                                return {
                                    type: "group",
                                    children: [
                                        {
                                            type: "CubeLeft",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#00BFF4',
                                                    },
                                                    {
                                                        offset: 0.35,
                                                        color: '#0064B5'
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'transparent'
                                                    }
                                                ]),
                                            },
                                        },
                                        {
                                            type: "CubeRight",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#0064B5',
                                                    },
                                                    {
                                                        offset: 0.35,
                                                        color: '#00BFF4'
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'transparent'
                                                    }
                                                ]),
                                            },
                                        },
                                        {
                                            type: "CubeTop",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: '#00BFF4'
                                            },
                                        },
                                    ],
                                };
                            },
                            data: yaxisData,
                        },
                        {
                            type: "bar",
                            itemStyle: {
                                color: "transparent",
                            },
                            data: yaxisData,
                        },
                    ],
                };
                myChart.setOption(option);
            },
            // 客流统计同比
            getKlTjTb(){
                var currentYear = new Date().getFullYear();
                this.jinnian1=currentYear+'年';
                var lastYear = currentYear - 1;
                this.jinnian2=lastYear+'年';
                this.$http.post("sys/visitorflow/selectVisitorScreen", {
                    islandId: this.myislandId,
                    province:this.province
                })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.analysislastyear=res.data.data.lastAnnualArr;  //客流统计分析-去年
                        this.analysisThisyear=res.data.data.currAnnualArr;    //客流统计分析-今年
                        this.analysisyearonyearbasis=res.data.data.annualRatioArr;    //客流统计分析-同比
                        this.Statisticalanalysisdata();
                        
                        this.trait1=res.data.data.alldayFeature.boyRatio;  //游客特征分析
                        this.trait2=res.data.data.alldayFeature.girlRatio;
                        this.trait3=res.data.data.alldayFeature.childNum;
                        this.Ratio3=res.data.data.alldayFeature.childRatio;
                        this.trait4=res.data.data.alldayFeature.youngNum;
                        this.Ratio4=res.data.data.alldayFeature.youngRatio;
                        this.trait5=res.data.data.alldayFeature.midNum;
                        this.Ratio5=res.data.data.alldayFeature.midRatio;
                        this.trait6=res.data.data.alldayFeature.oldNum;  //游客特征分析
                        this.Ratio6=res.data.data.alldayFeature.oldRatio;
                        this.totalNum=res.data.data.alldayFeature.totalNum;
                        this.getFeatureanalysis1()
                        this.getFeatureanalysis2()
                        this.getFeatureanalysis3()
                        this.getFeatureanalysis4()

                        this.renshuyear1 = res.data.data.annualList.map(obj => obj.monthMod);// 游客人数-年
                        this.renshuyear2 = res.data.data.annualList.map(obj => obj.personNum);// 游客人数-年-人数
                        this.renshujidu1 = res.data.data.quarterList.map(obj => obj.monthMod);// 游客人数-年
                        this.renshujidu2 = res.data.data.quarterList.map(obj => obj.personNum);// 游客人数-年-人数
                        this.renshuyue1 = res.data.data.monthList.map(obj => obj.monthMod);// 游客人数-年
                        this.renshuyue2 = res.data.data.monthList.map(obj => obj.personNum);// 游客人数-年-人数
                        this.shijian= this.renshuyear1;
                        this.renshu=this.renshuyear2;
                        this.getPassengerflowdata();  //年度累计客流
                    } else this.$message.error(res.data.msg);
                })
            },
            Statisticalanalysisdata(){
                let myChart = echarts.init(this.$refs.Statisticalanalysis)
                let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#fff'
                    }
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    top: '30%',
                    bottom: '1%',
                    containLabel: true,
                },

                legend: {
                    data: [this.jinnian2, this.jinnian1, '同比'],
                    textStyle: {
                    fontSize: 12,
                    color: '#fff',
                    },
                    right: '0',
                },
                xAxis: [
                    {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                        width: 1,
                        color: '#035192'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#C6D7F1'
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: '单位:人',
                    min: 0,
                    max: 250,
                    interval: 50,
                    nameTextStyle: {
                        color: '#C6D7F1',
                        fontWeight: 400,
                        fontSize: 12
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                        width: 1,
                        color: '#545454'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#C6D7F1',
                    //  formatter: '{value} ml'
                    }
                    },
                    {
                    type: 'value',
                    name: '同比:%',
                    // min: 0,
                    // max: 25,
                    // interval: 5,
                    nameTextStyle: {
                        color: '#C6D7F1',
                        fontWeight: 400,
                        fontSize: 12
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                        width: 1,
                        color: '#545454'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#C6D7F1',
                    //  formatter: '{value} ml'
                    }
                    }
                ],
                series: [
                    {
                    name:this.jinnian2,
                    type: 'bar',
                    barWidth: 8, // 设置柱子粗细
                    barGap: '70%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
                    //  barCategoryGap: '30%', //同一系列的柱间距离，默认为类目间距的20%，可设固定值

                    itemStyle: {
                        normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [
                            {offset: 0, color: '#34ABFF'},
                            {offset: 1, color: '#006BFE'}
                            ]
                        )
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value ;
                        }
                    },
                    data: this.analysislastyear
                    },
                    {
                    name: this.jinnian1,
                    type: 'bar',
                    barWidth: 8, // 设置柱子粗细
                    barGap: '70%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
                    itemStyle: {
                        normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [
                            {offset: 0, color: '#89FCCC'},
                            {offset: 1, color: '#00FF95'}
                            ]
                        )
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value;
                        }
                    },
                    data: this.analysisThisyear
                    },
                    {
                    name: '同比',
                    type: 'line',
                    yAxisIndex: 1,
                    // lineStyle: {
                    //   width: 2,
                    //   color: "#CF346B",
                    // },
                    lineStyle: { // 线条样式
                        normal: {
                        width: 2,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                            {
                            offset: 0,
                            color: '#F678A2'
                            },
                            {
                            offset: 1,
                            color: '#CF346B'
                            }
                        ])
                        }
                    },
                    smooth: true,
                    showSymbol: false,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + '%';
                        }
                    },
                    data: this.analysisyearonyearbasis
                    }
                ]
                };
                myChart.setOption(option);
                this.resizeEcharts(this.$refs.Statisticalanalysis);
            },
            // 获取游客特征分析
            getVisitorTzfx(){

            },
            getFeatureanalysis1(){
                let myChart = echarts.init(this.$refs.Featureanalysis1)
                let  option = {
                    series: [{
                        name: '进度',
                        type: 'pie',
                        radius: ['70%', '85%'],
                        //	radius: [159, 169],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        startAngle: 90,
                        labelLine: {
                        normal: {
                            show: false
                        }
                        },
                        data: [{
                        value:this.trait3,
                        itemStyle: {
                            normal: {
                            borderWidth: 45,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                offset: 0,
                                color: '#00FF95' // 0% 处的颜色
                                },  {
                                offset: 1,
                                color: '#5AFFE0' // 100% 处的颜色
                                }],
                            }
                            }
                        }
                        }, {
                        value:this.totalNum,
                        itemStyle: {
                            normal: {
                            borderWidth: 5,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                offset: 0,
                                color: '#05FF99' // 0% 处的颜色
                                }, {
                                offset: 1,
                                color: '#0CFFC9' // 100% 处的颜色
                                }],
                            },
                            opacity: 0.3
                            }
                        }
                        } ]
                    }]
                };
                myChart.setOption(option)
            },
            getFeatureanalysis2(){
                let myChart = echarts.init(this.$refs.Featureanalysis2)
                let  option = {
                series: [{
                    name: '进度',
                    type: 'pie',
                    radius: ['70%', '85%'],
                    //	radius: [159, 169],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    startAngle: 90,
                    labelLine: {
                    normal: {
                        show: false
                    }
                    },
                    data: [{
                    value:this.trait4,
                    itemStyle: {
                        normal: {
                        borderWidth: 45,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: '#006BFE' // 0% 处的颜色
                            },  {
                            offset: 1,
                            color: '#34ABFF' // 100% 处的颜色
                            }],
                        }
                        }
                    }
                    }, {
                    value:this.totalNum,
                    itemStyle: {
                        normal: {
                        borderWidth: 5,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: '#006BFE' // 0% 处的颜色
                            }, {
                            offset: 1,
                            color: '#34ABFF' // 100% 处的颜色
                            }],
                        },
                        opacity: 0.3
                        }
                    }
                    } ]
                }]
                };
                myChart.setOption(option)
            },
            getFeatureanalysis3(){
                let myChart = echarts.init(this.$refs.Featureanalysis3)
                let  option = {
                series: [{
                    name: '进度',
                    type: 'pie',
                    radius: ['70%', '85%'],
                    //	radius: [159, 169],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    startAngle: 90,
                    labelLine: {
                    normal: {
                        show: false
                    }
                    },
                    data: [{
                    value:this.trait5,
                    itemStyle: {
                        normal: {
                        borderWidth: 45,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: '#CF346B' // 0% 处的颜色
                            },  {
                            offset: 1,
                            color: '#F678A2' // 100% 处的颜色
                            }],
                        }
                        }
                    }
                    }, {
                    value:this.totalNum,
                    itemStyle: {
                        normal: {
                        borderWidth: 5,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: '#CF346B' // 0% 处的颜色
                            }, {
                            offset: 1,
                            color: '#F678A2' // 100% 处的颜色
                            }],
                        },
                        opacity: 0.3
                        }
                    }
                    } ]
                }]
                };
                myChart.setOption(option)
            },
            getFeatureanalysis4(){
                let myChart = echarts.init(this.$refs.Featureanalysis4)
                let  option = {
                series: [{
                    name: '进度',
                    type: 'pie',
                    radius: ['70%', '85%'],
                    //	radius: [159, 169],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    startAngle: 90,
                    labelLine: {
                    normal: {
                        show: false
                    }
                    },
                    data: [{
                    value:this.trait6,
                    itemStyle: {
                        normal: {
                        borderWidth: 45,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: '#B111FF' // 0% 处的颜色
                            },  {
                            offset: 1,
                            color: '#CE5BF2' // 100% 处的颜色
                            }],
                        }
                        }
                    }
                    }, {
                    value:this.totalNum,
                    itemStyle: {
                        normal: {
                        borderWidth: 5,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                            offset: 0,
                            color: '#B111FF' // 0% 处的颜色
                            }, {
                            offset: 1,
                            color: '#CE5BF2' // 100% 处的颜色
                            }],
                        },
                        opacity: 0.3
                        }
                    }
                    } ]
                }]
                };
                myChart.setOption(option)
            },
            // 获取年度累计客流人数
            getKlUsersByYear(){
                this.$http.post('/sys/hotel/screen/getHotelVisitorFlow',{islandIds:this.myislandId}).then(res=>{
                    if(res.data.code===0){
                        let resData = res.data.data;
                        this.jjrYearPersonNum = resData.headcount;
                        let maxNum = resData.holidayNums>resData.workdayNums?resData.holidayNums:resData.workdayNums;
                        let maxNumLen = maxNum.toString().length;
                        let sfbl = maxNumLen==0?0:Math.pow(10,(maxNumLen==1?1:(maxNumLen-Math.pow(2,maxNumLen-1))));//缩放比例   1\1  2\0  3\-1  4\-2  5\-3 n-2的n-1次方

                        this.initCahrtJjrrzfxChart(resData,sfbl);
                    }else this.$message.error(res.data.msg);
                })
            },
            getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                h
            ) {
                // 计算
                let midRatio = (startRatio + endRatio) / 2;

                let startRadian = startRatio * Math.PI * 2;
                let endRadian = endRatio * Math.PI * 2;
                let midRadian = midRatio * Math.PI * 2;

                // 如果只有一个扇形，则不实现选中效果。
                // if (startRatio === 0 && endRatio === 1) {
                //     isSelected = false;
                // }
                isSelected = false;
                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
                k = typeof k !== "undefined" ? k : 1 / 3;

                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
                let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
                let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

                // 计算高亮效果的放大比例（未高亮，则比例为 1）
                let hoverRate = isHovered ? 1.05 : 1;

                // 返回曲面参数方程
                return {
                u: {
                    min: -Math.PI,
                    max: Math.PI * 3,
                    step: Math.PI / 32,
                },

                v: {
                    min: 0,
                    max: Math.PI * 2,
                    step: Math.PI / 20,
                },

                x: function (u, v) {
                    if (u < startRadian) {
                    return (
                        offsetX +
                        Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    if (u > endRadian) {
                    return (
                        offsetX +
                        Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
                },

                y: function (u, v) {
                    if (u < startRadian) {
                    return (
                        offsetY +
                        Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    if (u > endRadian) {
                    return (
                        offsetY +
                        Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
                },

                z: function (u, v) {
                    if (u < -Math.PI * 0.5) {
                    return Math.sin(u);
                    }
                    if (u > Math.PI * 2.5) {
                    return Math.sin(u) * h * 0.1;
                    }
                    return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
                },
                };
            },
            // 生成模拟 3D 饼图的配置项
            getPie3D(pieData, internalDiameterRatio) {
                let series = [];
                let sumValue = 0;
                let startValue = 0;
                let endValue = 0;
                let legendData = [];
                let k =
                typeof internalDiameterRatio !== "undefined"
                    ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
                    : 1 / 3;

                // 为每一个饼图数据，生成一个 series-surface 配置
                for (let i = 0; i < pieData.length; i++) {
                sumValue += pieData[i].value;

                let seriesItem = {
                    name:
                    typeof pieData[i].name === "undefined"
                        ? `series${i}`
                        : pieData[i].name,
                    type: "surface",
                    parametric: true,
                    wireframe: {
                    show: false,
                    },
                    pieData: pieData[i],
                    pieStatus: {
                    selected: false,
                    hovered: false,
                    k: 1 / 10,
                    },
                };

                if (typeof pieData[i].itemStyle != "undefined") {
                    let itemStyle = {};

                    typeof pieData[i].itemStyle.color != "undefined"
                    ? (itemStyle.color = pieData[i].itemStyle.color)
                    : null;
                    typeof pieData[i].itemStyle.opacity != "undefined"
                    ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                    : null;

                    seriesItem.itemStyle = itemStyle;
                }
                series.push(seriesItem);
                }

                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
                for (let i = 0; i < series.length; i++) {
                endValue = startValue + series[i].pieData.value;

                series[i].pieData.startRatio = startValue / sumValue;
                series[i].pieData.endRatio = endValue / sumValue;
                series[i].parametricEquation = this.getParametricEquation(
                    series[i].pieData.startRatio,
                    series[i].pieData.endRatio,
                    false,
                    false,
                    k,
                    series[i].pieData.value
                );

                startValue = endValue;

                legendData.push(series[i].name);
                }
                return series;
            },
            initCahrtJjrrzfxChart(resData,sfbl){
                const optionsData = [
                    {
                        name: "工作日",
                        value: resData.workdayNums,
                        itemStyle: {
                            color: "#036FFE",
                        }
                    },
                    {
                        name: "节假日",
                        value: resData.holidayNums,
                        itemStyle: {
                            color: "#1CFFAC",
                        }
                    }
                ];
                const series = this.getPie3D(optionsData, 0.8);
                series.push({
                    name: "pie2d",
                    type: "pie",
                    label: {
                        show:false,
                    },
                    labelLine: {
                        show:false,
                    },
                    startAngle: -30, //起始角度，支持范围[0, 360]。
                    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                    radius: ["40%", "60%"],
                    center: ["50%", "50%"],
                    data: optionsData,
                    itemStyle: {
                        opacity: 0,
                    },
                });
                // 准备待返回的配置项，把准备好的 legendData、series 传入。
                let option = {
                    legend: {
                        orient: "vertical",
                        data: ["工作日", "节假日"],
                        textStyle: {
                            color: "#373737",
                            fontSize: "12px",
                            rich: {
                                name: {
                                    color: '#C6D7F1',
                                    fontSize: 14,
                                    fontWeight: 400,
                                    padding:[0,0,0,6]
                                },
                                num:{
                                    color: '#C6D7F1',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    padding:[0,0,0,12]
                                },
                                bl:{
                                    color: '#C6D7F1',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    padding:[0,0,0,12]
                                }
                            }
                        },
                        top: "center",
                        right: "2%",
                        itemGap: 22,
                        itemHeight: 8,
                        itemWidth: 8,
                        formatter: function(name){
                            let bl = name=='工作日'?resData.workdayRatio:resData.holidayRatio;
                            let sz = name=='工作日'?resData.workdayNums:resData.holidayNums;
                            return `{name|${name}}{num|${sz}}{bl|${bl+'%' || '0%'}}`
                        }
                    },
                    animation: true,
                    tooltip: {
                        formatter: (params) => {
                            if (
                                params.seriesName !== "mouseoutSeries" &&
                                params.seriesName !== "pie2d"
                            ) {
                                return `${
                                    params.seriesName
                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                                    params.color
                                };"></span>${
                                    option.series[params.seriesIndex].pieData.value + "人"
                                }`;
                            }
                        },
                        textStyle: {
                            fontSize: 14,
                        },
                    },
                    title: {
                        x: "center",
                        top: "20",
                        textStyle: {
                            color: "#fff",
                            fontSize: 22,
                        },
                    },
                    backgroundColor: "transparent",
                    labelLine: {
                        show: true,
                        lineStyle: {
                            color: "#7BC0CB",
                        },
                        normal: {
                            show: true,
                            length: 10,
                            length2: 10,
                        },
                    },
                    label: {
                        show: true,
                        position: "outside",
                        formatter: "{b} \n{d}%",
                        textStyle: {
                            color: "#fff",
                            fontSize: "14px",
                        },
                    },
                    xAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    yAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    zAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    grid3D: {
                        show: false,
                        boxHeight: sfbl*8,
                        //top: '30%',
                        left: "1%",
                        top: -15,
                        width: "60%",
                        // environment: "rgba(255,255,255,0)",
                        viewControl: {
                            distance: 130,
                            alpha: 35,
                            beta: 15,
                            autoRotate: false, // 自动旋转
                            rotateSensitivity: 1,
                            zoomSensitivity: 0,
                            panSensitivity: 0,
                        }
                    },
                    series: series,
                };
                //构建3d饼状图
                let myChart = echarts.init(this.$refs.jjrrzfxChart);
                myChart.setOption(option);
                this.resizeEcharts(this.$refs.jjrrzfxChart);
            },
            // 获取客流统计分析
            changeTabByKltjfx(idx,type){
                this.kidx = idx;
                this.Overviewparkselect = type;
                this.shijian=[];
                this.renshu=[];
                if(this.Overviewparkselect==1){
                    this.shijian=this.renshuyear1;
                    this.renshu=this.renshuyear2;
                    this.getPassengerflowdata();  //年度累计客流
                }else  if(this.Overviewparkselect==2){
                    this.shijian=this.renshujidu1;
                    this.renshu=this.renshujidu2;
                    this.getPassengerflowdata();  //年度累计客流
                }else  if(this.Overviewparkselect==3){
                    this.shijian=this.renshuyue1;
                    this.renshu=this.renshuyue2;
                    this.getPassengerflowdata();  //年度累计客流
                }
            },
            getKlTjFx(){

            },
            getPassengerflowdata () {
                let myChart = echarts.init(this.$refs.Passengerflow);
                let  option = {
                    grid:{ // 让图表占满容器
                        top:"22%",
                        left:"10%",
                        right:"3%",
                        bottom:"16%"
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        backgroundColor: '#fff', // 悬浮框背景色
                        borderColor: '#000', // 悬浮框边框颜色
                        borderWidth: 1, // 悬浮框边框宽度
                        textStyle: { // 悬浮框文字样式
                            color: '#000',
                            fontSize: 12
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.shijian,
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    yAxis: {
                        name: '',
                        nameTextStyle: {
                            color: '#C6D7F1',
                            fontWeight: 400,
                            fontSize: 12
                        },
                        type: 'value',
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    series: [
                        {
                            data: this.renshu,
                            type: 'line',
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false // 在折线拐点上显示数据
                                    },
                                    lineStyle: {
                                        width: 3,  // 设置虚线宽度
                                        type: 'solid'  // 虚线'dotted' 实线'solid'
                                    },
                                    color: '#00B1E6',
                                },
                            },
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#00B1E6', // 折线线条颜色:红色
                                },
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [  // 渐变颜色
                                        {
                                            offset: 0,
                                            color: 'rgba(85,111,253,0.50)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(85,111,253,0.00)',
                                        },
                                    ],
                                    global: false,
                                },
                            },

                        }
                    ]
                };
                myChart.setOption(option);
            },
            //解决图表鼠标悬浮错位问题
            resizeEcharts(ele) {
                let rate = 1920 / window.innerWidth;
                if ( ele.style ) {
                    ele.style.zoom = 1 * rate;
                    ele.style.transform = `scale(${1 / rate})`;
                    ele.style.transformOrigin = 'top left';
                }
            },
            //切换岛屿
            changeTown(id,index,no){
                this.townIndex = index;
                if(!id) return
                this.myislandId = id;
                this.portNo = no;
                this.init();
                clearInterval(refreshTimer);
                refreshTimer = setInterval(() => {
                    this.init();
                }, 15000);
            }
        }
    }
</script>
<style scoped lang="scss">
    .screen-box{
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
        background-image: url(../../../assets/largescreen/new/bg_zong.png) !important;
        background-size: 100% 100%;

        .screen-wrapper{
            position: relative;
            .dp_map{
                width: 980px;
                height: 980px;
                background-image: url(../../../assets/largescreen/new/m_map_bg.png);
                background-size: 100% 100%;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -490px;
            }

            .map_town{
                width: 68px;
                height: 41px;
                background: url('../../../assets//largescreen/town_bg.png');
                position: absolute;
                font-size: 14px;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                padding-top: 6px;
                cursor: pointer;
                &.town_active{
                    width: 84px;
                    height: 78px;
                    font-size: 16px;
                    background: url('../../../assets//largescreen/town_active_bg.png');
                    padding-top: 7px;
                    margin-left: -8px;
                    margin-top: -37px;
                }
            }
        }

        .dp_top{
            width: 100%;
            height: 118px;
            background-image: url(../../../assets/largescreen/new/top_title.png);
            background-position: center center;
            background-size: 100% 100%;
            position: relative;

            .dt_back_weather{
                position: absolute;
                top: 18px;
                left: 39px;
                display: flex;
                align-items: center;
                .dbw_fh{
                    width: 102px;
                    height: 38px;
                    cursor: pointer;
                }
                .dbw_tianqi{
                    display: flex;
                    align-items: center;
                    margin-left: 19px;
                    img{
                        width: 24px;
                        height: 22px;
                    }
                    .tianqi{
                        margin-left: 6px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #C6D7F1;
                        line-height: 22px;
                    }
                }
            }

            .dt_type{
                width: 180px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-position: center center;
                background-size: 100% 100%;
                position: absolute;
                top: 52px;
                cursor: pointer;
                z-index: 3;
                &>div{
                    font-family: YouSheBiaoTiHei;
                    font-size: 20px;
                    color: #FFFFFF;
                }
                &.selected_left{
                    background-image: url(../../../assets/largescreen//new/top_text_bg_selected_left.png);
                }
                &.selected_right{
                    background-image: url(../../../assets/largescreen//new/top_text_bg_selected_right.png);
                }
            }
            .selected_left,.selected_right{
                &>div{
                    background-image: linear-gradient(to bottom, #FFFFFF 0%, #90DEFF 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
            .dt_type_ykhx,.dt_type_jq{
                background-image: url(../../../assets/largescreen//new/top_text_bg1.png);
            }
            .dt_type_jdms,.dt_type_jt{
                background-image: url(../../../assets/largescreen//new/top_text_bg2.png);
            }
            .dt_type_ykhx{
                left: 200px;
            }
            .dt_type_jq{
                left: 380px;
            }
            .dt_type_jdms{
                right: 380px;
            }
            .dt_type_jt{
                right: 200px;
            }

            .dt_time{
                position: absolute;
                top: 26px;
                right: 37px;
                font-family: DS, DS;
                font-size: 20px;
                color: #FFFFFF;
                line-height: 22px;
                text-align: left;
                background-image: linear-gradient(to bottom, #FAFCFF 0%, #44A7FE 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .dt_click{
                width: 670px;
                height: 100%;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -335px;
                cursor: pointer;
                z-index: 2;
            }
        }

        .dp_middle{
            width: 100%;
            height: calc(100% - 165px);
            display: flex;
            .dm_left,.dm_right{
                width: 470px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .dm_left{
                padding: 0 24px 0 26px;
                .jqykl_msrzl{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .item{
                        width: 100%;
                        height: 109px;
                        background: url(../../../assets/largescreen/new/m_left_jq_bg.png) no-repeat;
                        background-size: 100%;
                        &:last-child{
                            background: url(../../../assets/largescreen/new/m_left_ms_bg.png) no-repeat;
                            background-size: 100%;
                            margin-top: 28px;
                        }
                        .info{
                            margin: 28px 0 0 244px;
                            p{
                                font-family: PingFangHK, PingFangHK;
                                font-weight: 500;
                                font-size: 14px;
                                color: #C6D7F1;
                                line-height: 20px;
                                display: flex;
                                align-items: center;
                                &:last-child{
                                    margin-top: 10px;
                                    font-family: DINAlternate, DINAlternate;
                                    font-weight: bold;
                                    font-size: 20px;
                                    line-height: 24px;
                                    span{
                                        margin-left: 6px;
                                        font-family: PingFangSC, PingFang SC;
                                        font-weight: 400;
                                        font-size: 12px;
                                        color: #C6D7F1;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .dm_center{
                width: calc(100% - 940px);
                position: relative;
                .dmc_map{
                    padding: 26px 23px 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .dmcm_nums{
                        display: flex;
                        .dn_pte{
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            &:nth-child(2){
                                margin: 0 80px;
                            }
                            .title{
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: bold;
                                font-size: 16px;
                                color: #C6D7F1;
                                line-height: 22px;
                            }
                            .nums{
                                display: flex;
                                .n_item{
                                    width: 40px;
                                    height: 56px;
                                    line-height: 56px;
                                    text-align: center;
                                    background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                                    background-size: 100% 100%;
                                    margin: 5px 2px 0 2px;
                                    font-size: 30px;
                                    font-family: D-DINExp, D-DINExp;
                                    font-weight: bold;
                                    color: #C6D7F1;
                                    &:first-child{
                                        margin-left: 0;
                                    }
                                }
                            }
                        }
                    }
                }
                .box_kltjfx{
                    width: 100%;
                    height: 300px;
                    padding: 0 20px;
                    box-sizing: border-box;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
            .dm_right{
                padding: 0 26px 0 24px;
            }
        }

        .dp_bottom{
            width: 100%;
            height: 47px;
            background-image: url(../../../assets/largescreen/new/bg_bottom.png);
            background-position: center center;
            background-size: 100% 100%;
        }

        .box{
            position: relative;
            background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
            .b_title{
                width: 420px;
                height: 44px;
                background: url("../../../assets/largescreen/y6.png") no-repeat;
                padding-left: 33px;
                line-height: 36px;
                font-size: 20px;
                font-family: YouSheBiaoTiHei;
                color: #FFFFFF;
            }
        }

        .dp_box{
            width: 420px;
            height: 300px;
            background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
            position: relative;

            .shiporder_tabs{
                width: 96px;
                height: 24px;
                display: flex;
                background: #15213E;
                border-radius: 2px;
                border: 1px solid #34579F;
                position: absolute;
                top: 50px;
                right: 4px;
                z-index: 999;
                .pre{
                    width: 50%;
                    height: 100%;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #6D7D99;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    &.active{
                        background: linear-gradient( 180deg, #273F7C 0%, #4566BC 100%);
                        border-image: linear-gradient(180deg, rgba(51, 86, 158, 1), rgba(66, 104, 189, 1)) 1 1;
                        color: #FFFFFF;
                    }
                }
            }

            .kltjfx_tabs{
                display: flex;
                background: #15213E;
                border-radius: 2px;
                border: 1px solid #34579F;
                position: absolute;
                top: 50px;
                right: 4px;
                z-index: 999;
                .pre{
                    height: 24px;
                    padding: 5px 8px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #6D7D99;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border-right: 1px solid #34579F;
                    &:last-child{
                        border: none;
                    }
                    &.active{
                        background: linear-gradient( 180deg, #273F7C 0%, #4566BC 100%);
                        border-image: linear-gradient(180deg, rgba(51, 86, 158, 1), rgba(66, 104, 189, 1)) 1 1;
                        color: #FFFFFF;
                    }
                }
            }

            .Featureanalysis {
                width: 100%;
                height: 120px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                &>div{
                    width: 48%;
                    height: 90px;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center center;
                }
                .Featureanalyimgsis1 {
                    background: url("../../../assets/largescreen/y8.png");
                }
                .Featureanalyimgsis2 {
                    background: url("../../../assets/largescreen/y9.png");
                }
                .male1,.male2{
                    width: 100%;
                    height: 45px;
                    font-size: 14px;
                    font-weight: 600;
                    color: #C6D7F1;
                    line-height: 55px;
                    text-align: right;
                    padding-right: 60px;
                }
                .male1 {
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    line-height: 55px;
                    padding-right: 60px;
                }
                .male2 {
                    font-size: 20px;
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    line-height: 25px;
                    padding-right: 40px;
                }
            }

            .malepic {
                flex-grow: 1;
                width: 100%;
                height: calc(100% - 120px);
                display: flex;
                .malepicdiv {
                    width: 25%;
                    height: 100%;
                    .malepicdiv1 {
                        width: 70px;
                        height: 70%;
                        margin: 0 auto;
                        position: relative;
                        .Featureanalysispics{
                            width: 100%;
                            height: 100%;
                        }
                        .bili{
                            position: absolute;
                            top:50%;
                            left:50%;
                            transform:translate(-50%,-50%);
                            color: #fff;
                            z-index: 1999;
                        }
                    }
                    .malepicdiv2 {
                        width: 100%;
                        height: 30%;
                        font-size: 12px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #C6D7F1;
                        line-height: 30px;
                        text-align: center;
                    }
                }
            }
        }

        .db_content{
            width: 100%;
            height: calc(100% - 44px);
            .chart{
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 998;

                .cb_title{
                    width: calc(100% - 20px);
                    height: 40px;
                    background: linear-gradient(270deg, rgba(39,115,255,0.4) 0%, rgba(39,115,255,0.25) 23%, rgba(39,115,255,0.06) 100%);
                    border-radius: 2px;
                    border: 1px solid #294178;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 10px 10px 0;
                    img{
                        width: 24px;
                        height: 24px;
                    }
                    p{
                        margin-left: 20px;
                        font-size: 14px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #C6D7F1;
                        display: flex;
                        align-items: center;
                        span{
                            font-size: 18px;
                            font-family: DINAlternate, DINAlternate;
                            font-weight: bold;
                            color: #FFFFFF;
                            margin: 0 10px;
                        }
                    }
                }
                .cb_chart_jjr{
                    height: calc(100% - 50px);
                    &>div{
                        width: 100%;
                        height: 100%;
                    }
                }

                &.mjzyx_pm{
                    width:100%;
                    height: 100%;
                    padding:0 20px;
                    box-sizing: border-box;
                    overflow:hidden;
                    ::v-deep .ul-scoll{
                        padding-left: 0 !important;
                    }
                    .mpm_item{
                        margin-bottom: 6px;
                        list-style: none;
                        .mpmi_top{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .mpmit_l{
                                display: flex;
                                align-items: center;
                                .mpmil_top{
                                    width: 48px;
                                    height: 20px;
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    line-height: 20px;
                                    text-align: center;
                                    font-family: YouSheBiaoTiHei;
                                    font-size: 12px;
                                    color: #FFFFFF;
                                }
                                p{
                                    margin-left: 10px;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 12px;
                                    color: #C6D7F1;
                                }
                            }
                            .mpmit_r{
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 12px;
                                color: #C6D7F1;
                            }
                        }
                        .mpmi_bottom{
                            margin-top: -4px;
                            width: 100%;
                            height: 4px;
                            border-radius: 2px;
                            background: rgba(31,120,251,0.2);
                            position: relative;
                            .mpmi_bottom_bl{
                                height: 100%;
                                background: linear-gradient( 270deg, #08F4F9 0%, rgba(1,155,243,0) 100%);
                                position: absolute;
                                left: 0;
                                top: 0;
                            }
                        }
                    }
                }
            }
        }
    }
</style>